<template>
    <base-dialog title="分发传阅"
                 v-bind="$attrs" v-on="$listeners" size="tinylong" no-padding>
        <el-tabs type="border-card" v-model="activeName"  @tab-click="handleClick">
            <el-tab-pane :name="index+''" :label="item.name" v-for="(item,index) in tabList" :key="index">
                <div class="tab-content" v-if="activeName==index">
                    <el-input
                            placeholder="搜索"
                            v-model="filterText" size="small" style="margin:10px 20px 0px; width: 90%" clearable>
                    </el-input>
                    <el-tree :data="item.list" :ref="'tree'+index" :props="defaultProps" @node-click="handleNodeClick"
                             @check-change="handleNodeClick"
                             :filter-node-method="filterNode"
                             :showCheckbox="showCheckbox" :check-on-click-node="true" node-key="id"></el-tree>
                </div>
            </el-tab-pane>
        </el-tabs>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handelConfirm">确 定</el-button>
        </span>
    </base-dialog>
</template>
<script>
    import schoolSignature from "@/api/officialDocument/schoolSignature/index"
    import XEUtils from "xe-utils";
    import BaseDialog from "../../Common/BaseDialog";
    import common from "@/api/common/index";
    import {handleTree,concatChildren} from "@/utils/common";
    export default {
        name: "IssueListDialog",
        components: {BaseDialog},
        data() {
            return {
                tabList:[],
                filterText:undefined,
                activeName: '0',
                showCheckbox: true,
                defaultProps: {
                    children: 'users',
                    label: 'alias'
                },
            };
        },
        watch:{
            filterText(val) {
                this.$refs['tree'+this.activeName][0].filter(val);
            }
        },
        props: ["row"],
        created() {
          this.getDicts("dist_tab_key").then(response => {
            this.tabList = response.data;
            this.getList()
          });
        },
        computed: {

        },
        methods: {
            handleClick(){
                if( this.tabList[this.activeName].list == undefined){
                  this.getList()
                }
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.alias.indexOf(value) !== -1;
            },
            async getList() {
              let data = eval("("+ this.tabList[this.activeName].value+")")
              await common.getAccountSelect(data).then(res => {
                  let list = handleTree(res.data, "id", "parent_dept");
                  concatChildren(list)
                  this.$set(this.tabList[this.activeName],"list",list)
              })

            },
            handleNodeClick() {

            },
            handleClose(done) {
                this.$emit('update:visible', false)
            },
            handelConfirm() {
                let keys = []
                    keys = this.$refs['tree'+this.activeName][0].getCheckedKeys();
                    keys = keys.filter(item => {
                        return item != null
                    })
                if (keys.length == 0) {
                    this.msgError("请选择用户！");
                    return
                }
                let params = {
                    "document": this.row.id,//公文UUID 必选
                    "user": keys,//用户ID 数组 必选
                    type_id: this.row.type_id
                }
              this.handleClose()
                console.log('--dxs---',params)
                // schoolSignature.addDocumentDist(params).then(res => {
                //     this.msgSuccess(res.msg);
                //     this.handleClose()
                // })
            },
        }
    };
</script>
<style lang="scss" scoped>
    .tab-content {
        height: calc(70vh - 220px);
        overflow-y: scroll;
    }
</style>
